{% extends "/based/based.html" %}
{% block content %}
    <!-- 创建图容器 -->
	ok5
     <div id="container" > </div>

   
	<script>
	
	

	const data = {
			nodes:[
					{%for i in range(0,nodes|length) %} 
					{%for j in range(0,nodes[i][1]|length) %} 
						{
						    id:'{{nodes[i][0]+'_'+nodes[i][1][j]["id"]}}',
						    label:'{{nodes[i][1][j]["label"]}}',
							size:{{nodes[i][1][j]["size"]}},
							chg_cls_r:{{nodes[i][1][j]["chg_cls_r"]}},
							style:{
								fill:'{{nodes[i][1][j]["style"]["fill"]}}',
								
								},
							cluster:{{nodes[i][1][j]["cluster"]}},
							comboId:'{{nodes[i][1][j]["comboId"]}}',
						    date: '{{nodes[i][0]}}',
						    values: '{{nodes[i][0]}}',
						},
					{% endfor %}	
					{% endfor %}	
				],
		   combos: [
		        	{%for i in range(0,nodes|length) %} 
			        {%for j in range(0,combos|length) %} 
						{id:'{{combos[j]["id"]}}',
						label:'{{combos[j]["label"]}}',
						 date: '{{nodes[i][0]}}',
					    values: '{{nodes[i][0]}}',
						},
					{% endfor %}
					{% endfor %}
			  ],
		  edges: [ 
				
				  	{%for i in range(0,edges|length) %} 
						{id:'{{edges[i]["id"]}}',
						source:'{{edges[i]["source"]}}',
						target:'{{edges[i]["target"]}}',
						},
					{% endfor %}
					
				  ],
	  
	};
	
	
	const colors = [
	  '#BDD2FD',
	  '#BDEFDB',
	  '#C2C8D5',
	  '#FBE5A2',
	  '#F6C3B7',
	  '#B6E3F5',
	  '#D3C6EA',
	  '#FFD8B8',
	  '#AAD8D8',
	  '#FFD6E7',
	];
	const strokes = [
	  '#5B8FF9',
	  '#5AD8A6',
	  '#5D7092',
	  '#F6BD16',
	  '#E8684A',
	  '#6DC8EC',
	  '#9270CA',
	  '#FF9D4D',
	  '#269A99',
	  '#FF99C3',
	];
	
	const timeBarData = [
						{%for i in range(0,nodes|length) %} 
							{
							    date: '{{nodes[i][0]}}',
							    values: '{{nodes[i][0]}}',
							  
							},
						{% endfor %}
						];
	
	let count = 0;
	const timebar = new G6.TimeBar({
	  x: 0,
	  y: 0,
	  width:2000,
	  height: 150,
	  padding: 10,
	  type: 'tick',
	  tick: {
	    data: timeBarData,
	    width: 1000,
	    height: 42,
	    padding: 2,
	  },
	});
	// constrained the layout inside the area
	//const constrainBox = { x: 10, y: 10, width: 3000, height: 2800 };

	const onTick = () => {
		
		  
		  
		};
	
	const tooltip = new G6.Tooltip({
		  offsetX: 10,
		  offsetY: 10,
		  // the types of items that allow the tooltip show up
		  // 允许出现 tooltip 的 item 类型
		  itemTypes: ['node', 'edge'],
		  // custom the tooltip's content
		  // 自定义 tooltip 内容
		  getContent: (e) => {
		    const outDiv = document.createElement('div');
		    outDiv.style.width = 'fit-content';
		    //outDiv.style.padding = '0px 0px 20px 0px';
		    outDiv.innerHTML = `
		      <ul>
		        <li> ${e.item.getModel().label || e.item.getModel().id}</li>
		      </ul>
		      <ul>
		        <li> ${e.item.getModel().chg_cls_r || e.item.getModel().id}</li>
		      </ul> `;
		    return outDiv;
		  },
		});
	const nodes = data.nodes;
	const clusterMap = new Map();
	let clusterId = 0;
	nodes.forEach(function (node) {
	  // cluster
	  if (node.cluster && clusterMap.get(node.cluster) === undefined) {
	    clusterMap.set(node.cluster, clusterId);
	    clusterId++;
	  }
	  const cid = clusterMap.get(node.cluster);
	  if (!node.style) {
	    node.style = {};
	  }
	  node.style.stroke = strokes[cid % strokes.length];
	});

	const container = document.getElementById('container');
	const width = 2800;
	const height = 1600;
	const graph = new G6.Graph({
	  container: 'container',
	  width,
	  height,
	  plugins: [tooltip,timebar],
	  modes: {
	    default: ['drag-combo', 'drag-node', 'drag-canvas', 'zoom-canvas'],
	  },
	  layout: {
		    type: 'force',
		    clustering: true,
		    clusterNodeStrength: -5,
		    clusterEdgeDistance: 200,
		    clusterNodeSize: 20,
		    clusterFociStrength: 1.2,
		    nodeSpacing: 5,
		    preventOverlap: true,
		    onTick,
	  },
	  animate: false,
	  defaultNode: {
		  labelCfg:{
			  style:{
					  fill:'black',
					  fontSize:25
					  },
		    },
	  },
	  defaultEdge: {
	    style: {
	      fill: '#352d2c',
	      endArrow: {
	        path: 'M 0,0 L 8,4 L 8,-4 Z',
	        fill: '#352d2c',
	      },
	    },
	  },
	});
	graph.data(data);
	graph.render();

	if (typeof window !== 'undefined')
	  window.onresize = () => {
	    if (!graph || graph.get('destroyed')) return;
	    if (!container || !container.scrollWidth || !container.scrollHeight) return;
	    graph.changeSize(container.scrollWidth, container.scrollHeight);
	  };

	
	</script>
	

{% endblock %}